'use strict';
import React, { createClass, PropTypes } from 'react'
import $ from 'jquery'
import 'bootstrap'
import { withRouter } from 'react-router'
import AsyncText from './AsyncText'

const ExchangeModal = withRouter(createClass({
    createExchangeOrder() {
        const { goodData, globalData } = this.props;
        let good_id = goodData.id,
            member_id = globalData.member_id,
            linkTo = id => this.props.router.push({
                pathname: '/shipping_info_page/'+id
            });

        $.ajax({
            url: '../webapp/data/respExchangeOrder.json',
            data: {
                member_id: member_id,
                good_id: good_id
            },
            type: 'GET',
            dataType: 'JSON',
            success: function(resp) {
                if(resp && resp.status == 1 && resp.data.id) {
                    linkTo(resp.data.id);
                }
                else {

                }
            }
        });

    },
    render() {
        const { dialogId, goodData, globalData, setGlobalData } = this.props;

        let points = globalData ? globalData.points : null,
            goodExchangeEnd = '',
            exchangeBtn,
            createExchangeOrder = () => {this.createExchangeOrder()};

        if(goodData.exchange) {
            if(points >= goodData.points) {
                exchangeBtn = <button type="button" className="btn btn-lg btn-blue" onClick={createExchangeOrder}>兑换</button>;
            }
            else {
                exchangeBtn = <button type="button" className="btn btn-lg btn-grey" disabled>兑换</button>;
            }
        }
        else {
            goodExchangeEnd = <div className="exchange-end"></div>;
            exchangeBtn = <button type="button" className="btn btn-lg btn-grey" disabled>兑换</button>;
        }

        return (
            <div className="modal fade exchange-modal" id={dialogId} tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            {goodExchangeEnd}
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <div className="good-img">
                                <img src={goodData.img_url} />
                            </div>
                            <div className="good-title">{goodData.title}</div>
                            <div className="row">
                                <div className="col-xs-6 col-md-6 meta-item">所需积分：<span>{goodData.points}</span></div>
                                <div className="col-xs-6 col-md-6 meta-item">我的积分：<AsyncText styleClass="" field="points" url="../webapp/data/userinfo.json" text={points} callFun={setGlobalData} /></div>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-lg btn-grey" data-dismiss="modal">取消</button>
                            {exchangeBtn}
                        </div>
                    </div>
                </div>
            </div>)
    }
}));

export default ExchangeModal;
